<template>
	<view class="personal">
		<view class="top">
			<view class="userInfo">
				<image mode="widthFix" :src="headimgurl"></image>
				<view class="userInf">
					<!-- <view class="name">{{userName}}</view> -->
					<view class="type">
						<view class="typeBg">
							测试版
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list-content">

			<view class="list" @click="logout">
				<view class="li noborder">
					<u-icon custom-prefix="custom-icon" name="tuichudenglu1" size="40" color='#dfb978'
						style="margin:0 10rpx;"></u-icon>
					<view class="text">退出登录</view>
					<image class="to" src="../../static/img/user/to.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		showToast
	} from '../../utils/utils.js'
	import {
		wxLogout,
	} from "@/utils/api/api.js"
	export default {
		data() {
			return {
				headimgurl: '/static/img/user/face.jpg',
				userName: '',
			};
		},
		onLoad() {
            let username = uni.getStorageSync('BindInfo').nickname;
			this.userName = username ? "欢迎您，" + username : '未登录'
		},
		methods: {
			//退出登录
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '您是否要退出当前账号',
					success: (res) => {
						if (res.confirm) {
							let data = {
								openId: uni.getStorageSync('BindInfo').openId
							}
							wxLogout(data).then(res => {
								if (res.code == 1) {
									let BindInfo = uni.getStorageSync('BindInfo')
									uni.clearStorageSync(); //清除缓存
									uni.setStorageSync('BindInfo', BindInfo);
									uni.reLaunch({ //并关闭其他页面
										url: '/pages/login/login',
									})
								} else {
									showToast(res.msg)
								}
							})

						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.personal {
		width: 100%;
		
		.top {
			width: 100%;
			display: flex;
			position: relative;
			// align-items: center;
			// justify-content: center;
			height: 450rpx;
			background: #2d3034;

			.userInfo {
				width: 80%;
				margin: auto;
				display: flex;
				margin-top: 100rpx;
				align-items: center;

				image {
					width: 20%;
					border: 2rpx solid #eee;
					border-radius: 50%;
				}

				.userInf {
					width: 75%;
					display: flex;

					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					padding-left: 5%;
					color: #fff;

					.name {
						width: 100%;
						line-height: 60rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.type {
						width: 100%;
						font-size: 24rpx;

						.typeBg {
							width: 20%;
							text-align: center;
							border-radius: 20rpx;
							background: #dfb978;
						}
					}
				}
			}
		}
		
		.list-content {
			font-size: 30rpx;
			background: #fff;
			margin-top: 20rpx;
		
			.list {
				width: 100%;
				border-bottom: 15rpx solid #f1f1f1;
				background: #fff;
		
		
				&:last-child {
					border: none;
				}
		
				.li {
					width: 92%;
					height: 100rpx;
					padding: 0 4%;
					border-bottom: 2rpx solid rgb(243, 243, 243);
					display: flex;
					align-items: center;
		
					&.noborder {
						border-bottom: 0
					}
		
					.text {
						padding-left: 20rpx;
						width: 100%;
						color: #666;
					}
		
					.to {
						flex-shrink: 0;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>
